<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>下载监控图表</title>
<link    rel="stylesheet" type="text/css" href="{{ctx}}/static/jqplot/jquery.jqplot.min.css" />
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="/js/jqplot/excanvas.js"></script><![endif]-->
<script    type="text/javascript" src="{{ctx}}/static/jqplot/jquery.min.js"></script>

<!-- Don't touch this! -->
    <script    type="text/javascript" src="{{ctx}}/static/jqplot/jquery.jqplot.min.js"></script>
<!-- Additional plugins go here -->
    <script    type="text/javascript" src="{{ctx}}/static/jqplot/plugins/jqplot.canvasTextRenderer.min.js"></script>
    <script    type="text/javascript" src="{{ctx}}/static/jqplot/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
    <script    type="text/javascript" src="{{ctx}}/static/jqplot/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
    <script    type="text/javascript" src="{{ctx}}/static/jqplot/plugins/jqplot.highlighter.min.js"></script>
    <script    type="text/javascript" src="{{ctx}}/static/jqplot/plugins/jqplot.cursor.min.js"></script> 
    <script    type="text/javascript" src="{{ctx}}/static/jqplot/plugins/jqplot.barRenderer.min.js"></script>
    <script    type="text/javascript" src="{{ctx}}/static/jqplot/plugins/jqplot.pieRenderer.min.js"></script>
    <script    type="text/javascript" src="{{ctx}}/static/jqplot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
    <script    type="text/javascript" src="{{ctx}}/static/jqplot/plugins/jqplot.pointLabels.min.js"></script>
    <script    type="text/javascript" src="{{ctx}}/static/jqplot/plugins/jqplot.meterGaugeRenderer.min.js"></script>
    <script    type="text/javascript" src="{{ctx}}/static/jqplot/plugins/jqplot.enhancedLegendRenderer.min.js"></script>
    <script    type="text/javascript" src="{{ctx}}/static/jqplot/plugins/jqplot.dateAxisRenderer.min.js"></script>
<!-- End additional plugins -->
<!--     <script type="text/javascript" src="jqplot/examples/example.min.js"></script> -->
<style type="text/css">
#chart1 .jqplot-point-label {
  border: 1.5px solid #aaaaaa;
  padding: 1px 10px;
  background-color: #eeccdd;
}
</style>

<script type="text/javascript">

$(function() {
	var url = "{{ctx}}/plot/show/{{appMainVo.id}}/{{type}}";

	$.ajax({
		type : 'GET',
		url: url,
		dataType:'json',
		success: function(json){
			if(json) {
      ////////////////////////////monitor/////////////////////////////////////////////
   var lines=new Array();
  lines=getLines(json);
                    	//append 一个放chart的div
						$("#monitorDiv").append('<div class="col-lg-12" id="bar">'
						          +'<div id="monitorChart" class="jqplot-target" style="margin-top:20px;height:600px; margin-left:20px;"></div>'
						          +'</div>');
		makeMonitorChart("monitorChart",lines,json);
       ////////////////////////////monitor//////END///////////////////////////////////
          
		
			}
		},
		error: function (data)
		{ 
			//alert(data);
			alert("响应超时，出现了未知的错误");
			//$(".row").h();
			$(".message").html(":暂无数据");
	    }    
	});
});


function getLines(json)
{
   var lines=new Array();
   var labels=json['label'];
   for(var index in json){
if(index=="monitor")
{
  var monitors=json[index];

for(var label in labels)
{
  var line=new Array();
    for(var  indexA in monitors)
  {
  
    if(indexA==labels[label])
    {
     
     for(var data in monitors[indexA])
     {

        var lineMap=new Array();
        lineMap.push(data);
        if(data=="2013-11")
        {
          // lineMap.push(10);
           lineMap.push(monitors[indexA][data]);
        }
        else
        {
           lineMap.push(monitors[indexA][data]);
        }

        line.push(lineMap);
     }
    
    }
  }
  lines.push(line);

}

}

}
return lines;
}


//////////////////////////////////////////应用下载监控(分平台)/////////////////////////////////////////////////
function makeMonitorChart(chartId,lines,json){


    var max=json['max'];
    if(max<12)
    {
      max=12;
    }else
    {
      max=max+20;
    }
    var type=json['type'];
    var formatTime="";
    if(type=="month")
    {
      formatTime='%Y-%m';
    }else if(type=="day")
    {
      formatTime='%Y-%m-%d';
    }
    else
    {
       formatTime='%Y-%m-%d %#H';
    }
    var allLabls=json['label'];
    var labelArr = new Array(allLabls.length);
  // 约定第二个开始的key值名称为label值
  for ( var i = 0; i < allLabls.length; i++)
  {
    labelArr[i] = allLabls[i];
  }
    var plot1 = $.jqplot(chartId,lines, {
        title: '平台应用下载次数统计({{appMainVo.app_name}})',
       // series:[ {xaxis:'xaxis', yaxis:'yaxis'}],
        seriesColors: [ "red", "blue", "#EAA228", "#579575", "#839557", "#958c12", 
        "#953579", "#4b5de4", "#d8b83f", "#ff5800", "#0085cc"],  // 默认显示的分类颜色，
        axes: {
            xaxis: {
                renderer: $.jqplot.DateAxisRenderer,
                label: "",
                labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                tickOptions: {
                    formatString:formatTime,
                    showGridline: false,
                    angle: 30
                }
            },
          
            yaxis: {
                autoscale:true,
                label: '下载(次)',
                labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                max:max,
                tickOptions: {
                    formatString:'%d',
                    angle: 30
                }
            }
        },
        highlighter: { show: true, yvalues: 1, tooltipAxes: "xy",
                      formatString: '<table class="jqplot-highlighter"> \<tr><td>时段:%s</td></tr> \<tr><td>下载量:%s</td></tr></table>'
                  },
                  cursor: {
                      show: true
                  } , 
                  legend :
      { // 显示图例
        show : true,
        labels : labelArr,// 设置分类的名称
        placement : "outside", // 图例位置
        location : "ne",
        rowSpacing : "0px",
      },
        
    });
}



</script> 
<style>
.chart{float:left}
#chart2{padding-top:20px;}
</style> 
</head>
<body>
<div id="monitorDiv"></div>

   <div>

&nbsp;
<br>
<br>
   </div> 

</body>
</html>